<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>箭头函数的this</title>
  </head>

  <body>

  </body>
  <script>
    /* 
    箭头函数的this
     this指向总结：

        1. 全局使用（函数全局调用）指向window
        2. 对象调用指向该对象（事件中的事件源）
        3. 箭头函数没有自己的作用域，即箭头函数 this 指向其外层作用域

    */
    var name = "windowName";
    var obj = {
      name: "奶茶",
      fn: function () {
        console.log(this.name);
      },
    };
    //对象调用指向该对象（事件中的事件源）
    obj.fn(); //奶茶

    var obj2 = {
      name: "绿茶",
      fn2: () => {
        console.log(this.name);
      },
    };
    //全局使用（函数全局调用）指向window
    obj2.fn2(); //windowName

    //所以创建字面量对象，不适合书写箭头函数
  </script>

</html>